<template>
	<view class="u-list-item" :class="{'item-border':showBorder, 'u-pad': showSwitch}" @click="$emit('click')">
		<view class="item-left">
			<image class="left-icon" v-if="icon" :src="icon" mode="aspectFill"></image>
			<view class="title">{{title}}</view>
		</view>
		<view class="item-right" @click="$emit('rightClick')">
			<view class="note" :style="{'color': noteColor}" v-if="note && !imgSrc">{{note}}</view>
			<input class="item-ipt" :class="{'no-point': iptDisabled}" v-if="showIpt" :disabled="iptDisabled && showIpt" 
				type="text" :value="modelValue" 
			 :placeholder="placeholder" @input="$emit('update:modelValue', $event.detail.value)" />
      <text v-if="text">{{text}}</text>
			<image class="avatar" :src="imgSrc" :style="{'width': imgSize+'rpx','height': imgSize+'rpx'}" mode="aspectFill" v-if="!note && imgSrc"></image>
			<uni-icons v-if="showArrow" type="right" :size="16" color="#999"></uni-icons>
			<switch v-if="showSwitch" :checked="switch_checked" color="#B07EFF" :disabled="disabled" style="transform:scale(0.7)" @change="switch2Change" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			icon: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: '标题'
			},
      titleColor: {
        type: String,
        default: '#222'
      },
			titleWeight: {
				type: String,
				default: 'normal'
			},
      iptColor: {
        type: String,
        default: '#222'
      },
      text: {
        type: String,
        default: ''
      },
			note: {
				type: String,
				default: ''
			},
			noteColor: {
				type: String,
				default: '#999'
			},
			showSwitch: {
				type: Boolean,
				default: false
			},
			showArrow: {
				type: Boolean,
				default: false
			},
			showIpt: {
				type: Boolean,
				default: false
			},
			imgSrc: {
				type: String,
				default: ''
			},
      imgSize: {
        type: [String,Number],
        default: '80'
      },
      imgRadius: {
        type: String,
        default: '50%'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      checked: {
        type: Boolean,
        default: false
      },
			placeholder: {
				type: String,
				default: '请输入内容'
			},
			showBorder: {
				type: Boolean,
				default: true
			},
			iptDisabled: {
				type: Boolean,
				default: false
			},
			modelValue: ''
		},
		emits: ['click','switchChange','rightClick', 'update:modelValue'],
		data() {
			return {
				switch_checked: false
			}
		},
    watch: {
      checked: {
        handler(val) {
          if(val != this.switch_checked) {
            this.switch_checked = val
          }
        },
        immediate: true
      }
    },
		methods: {
			switch2Change(e) {
				const {value} = e.detail
        this.$emit('switchChange', value)
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-list-item{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 0;
		
		
		.item-left{
			display: flex;
			align-items: center;
			.left-icon{
				width: 56rpx;
				height: 56rpx;
				margin-right: 10px;
			}
			.title{
				font-size: 28rpx;
        color: v-bind(titleColor);
				font-weight: v-bind(titleWeight);
			}
		}
		.item-right{
			width: calc(100% - 220rpx);
			display: flex;
			align-items: center;
			justify-content: flex-end;
      position: relative;
      
			.note{
				padding-right: 4px;
				font-size: 28rpx;
			}
			.item-ipt {
        font-size: 30rpx;
				text-align: right;
				width: calc(100% - 40rpx);
        color: v-bind(iptColor);
			}
			.avatar{       
				border-radius: v-bind(imgRadius);
			}
      .point-cover{
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
      }
			.no-point {
				pointer-events: none;
			}
		}
	}
	.item-border {
		border-bottom: 1px solid #eee;
	}
  .u-pad {
    padding: 21rpx 0;
  }
	/* :deep(.uni-switch-input){
		border-color: #3E4B6D;
		background-color: #3E4B6D;
	}
	:deep(.uni-switch-input::before){
		background-color: #12151F;
		border: 1px solid #3E4B6D;
	}
	:deep(.uni-switch-input::after){
		background-color: #2E364D;
	} */
</style>